<template>
  <div>
    <van-calendar v-model="showDate" @confirm="onConfirm" />
    <van-calendar v-model="ShowAccountingEndDate" @confirm="EndTime" />
    <van-popup
      v-model="show"
      position="left"
      class="fa"
      :style="{ height: '100%', width: '100%' }"
    >
      <div>
        <van-nav-bar
          title="返料管理"
          left-text="返回"
          left-arrow
          @click-left="onClickLeft"
        />
        <div class="client">
          <van-field
            label="客户名称："
            v-model="entity.CustomerName"
            readonly
            placeholder="请选择客户"
          >
          </van-field>
          <van-field
            label="返料规则："
            @click="reworkRule"
            v-model="entity.RuleMainName"
            readonly
            placeholder="请选择规则"
            right-icon="edit"
            @click-right-icon="reworkRule"
          >
          </van-field>
          <van-field
            label="起始时间："
            placeholder="请选择时间"
            :value="entity.AccountingStartDate"
            @click="showDate = true"
          />
          <van-field
            label="结束时间："
            placeholder="请选择时间"
            :value="entity.AccountingEndDate"
            @click="ShowAccountingEndDate = true"
          />
        </div>
        <div class="scrollBar">
          <div class="boxx" v-for="item in data" :key="item.Id">
            <div class="left">
              品名:<span class="font"
                >{{ item.ProductId }}/{{ item.ProductName }}</span
              >
            </div>
            <!-- <van-divider /> -->
            <div class="left">
              规格:<span class="font">{{ item.cInvStd || "无" }}</span>
            </div>

            <span class="Fa">
              <!-- <van-field label="数量:" v-model="item.ProductIdNum" /> -->
              <span class="left">数量:</span>
              <van-stepper
                class="fontstepper"
                input-width="20px"
                v-model="item.AuxiliaryQuantity"
              />
            </span>
          </div>
        </div>
      </div>
      <Myuser @customerChoice="Client" ref="myuser" />
      <Product @Product="Product" ref="product" />
      <!-- 返料 -->
      <MaterialRules @Rule="Rule" ref="MaterialRules" />
      <div
        :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '5px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 1
        }"
      >
        <van-button @click="Add" slot="button" type="info">添加产品</van-button>
        <van-button
          @click="close"
          style="margin-left:8px"
          slot="button"
          type="default"
          >关闭</van-button
        >
        <van-button
          @click="handleSubmit"
          style="margin-left:8px"
          slot="button"
          type="primary"
          >保存</van-button
        >
      </div>
    </van-popup>
  </div>
</template>

<script>
import { Icon } from "vant";
import { Popup } from "vant";
import { AddressList } from "vant";
import MaterialRules from "@/components/MaterialRules.vue";
import {
  Row,
  Col,
  Cell,
  CellGroup,
  Toast,
  NavBar,
  Divider,
  Calendar
} from "vant";
import { Stepper, Field } from "vant";
//客户
import Myuser from "@/components/OwnUser.vue";
import Product from "../../components/Product.vue";
export default {
  components: {
    "van-stepper": Stepper,
    "van-calendar": Calendar,
    //分割线
    "van-divider": Divider,
    "van-nav-bar": NavBar,
    "van-icon": Icon,
    "van-popup": Popup,
    "van-row": Row,
    "van-address-list": AddressList,
    "van-field": Field,
    "van-col": Col,
    "van-cell": Cell,
    "van-cell-group": CellGroup,
    Myuser,
    Product,
    MaterialRules
  },
  data() {
    return {
      showDate: false,
      ShowAccountingEndDate: false,
      entity: {},
      data: [],
      show: false,
      Id: ""
    };
  },
  methods: {
    Rule(a) {
      this.$set(this.entity, "RuleMainName", a.RuleName);
      this.$set(this.entity, "RuleMainId", a.Id);
    },
    //选择规则
    reworkRule() {
      // console.log(123);
      this.$refs.MaterialRules.openForm();
    },
    formatDate(date) {
      var time = new Date(date);
      var y = time.getFullYear();

      return `${y}-${date.getMonth() + 1}-${date.getDate()}`;
    },
    onConfirm(date) {
      this.showDate = false;
      this.entity.AccountingStartDate = this.formatDate(date);
    },
    EndTime(date) {
      this.ShowAccountingEndDate = false;
      this.entity.AccountingEndDate = this.formatDate(date);
    },
    //返回
    onClickLeft() {
      this.show = false;
    },
    //选中的产品
    Product(a) {
      a.forEach(item => {
        this.data.push({
          ProductId: item.cInvCode,
          ProductName: item.cInvName,
          cInvCode: item.cInvCode,
          cInvStd: item.cInvStd
        });
      });
    },
    // 选择产品;
    Add() {
      if (this.entity.CustomerId && this.entity.RuleMainId) {
        this.$refs.product.openForm(this.entity.RuleMainId);
      } else {
        Toast("请先选择客户和规则");
        return;
      }
    },
    close() {
      this.show = false;
    },
    Client(a) {
      console.log(a);
      this.$set(this.entity, "CustomerName", a.cCusName);
      console.log(this.entity.CustomerName);
      // this.entity.CustomerName = a.cCusName;
      this.entity.CustomerId = a.cCusCode;
    },
    //选择客户
    CustomerChoice() {
      // console.log(123);
      this.$refs.myuser.openForm();
    },
    getDataList() {
      this.http
        .post("/GiftManagement/GMM_GiftMaterialApplyMain/GetTheData", {
          // PageIndex: this.pagination.current,
          // PageRows: this.pagination.pageSize,
          SortField: "Id",
          SortType: "desc",
          id: this.Id
        })
        .then(res => {
          if (res.Success) {
            this.entity = res.Data;

            this.data = res.Data.GMM_GiftMaterialApplyDetailsList;
            this.$set(
              this.entity,
              "AccountingStartDate",
              this.entity.AccountingStartDate.substring(0, 10)
            );
            this.$set(
              this.entity,
              "AccountingEndDate",
              this.entity.AccountingEndDate.substring(0, 10)
            );
            // console.log(this.data);
          } else {
            Toast(res.Msg);
          }
        });
    },
    init() {
      this.show = true;
      (this.data = []), (this.entity = {});
      var num = "";
      for (var i = 0; i < 3; i++) {
        num += Math.floor(Math.random() * 10);
      }
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let dd = new Date().getDate();
      let hh = new Date().getHours();
      let mf =
        new Date().getMinutes() < 10
          ? "0" + new Date().getMinutes()
          : new Date().getMinutes();
      let ss =
        new Date().getSeconds() < 10
          ? "0" + new Date().getSeconds()
          : new Date().getSeconds();
      var gettime = `${yy}${mm}${dd}${hh}${mf}${ss}${num} `;

      this.$set(this.entity, "DocumentNo", gettime);
    },
    handleSubmit() {
      var entityData = { ...this.entity };
      this.data.forEach(item => {
        item.cInvName = item.ProductName;
      });
      var GMM_GiftMaterialApplyDetailsList = [...this.data];

      entityData.GMM_GiftMaterialApplyDetailsList = GMM_GiftMaterialApplyDetailsList;
      // console.log(entityData);
      this.http
        .post("/GiftManagement/GMM_GiftMaterialApplyMain/SaveData", entityData)
        .then(resJson => {
          console.log(resJson);

          if (resJson.Success) {
            Toast(resJson.Msg);
            this.show = false;

            // console.log(this.$parent);
            // this.$parent.getDataList();
          } else {
            Toast(resJson.Msg);
          }
        });
    },
    openForm(name, code) {
      this.init();
      this.entity.CustomerName = name;
      this.entity.CustomerId = code;
    }
  }
};
</script>

<style scoped>
/* .left {
  margin-left: 15px;
} */
.left {
  margin: 10px 0px 10px 15px;
  /* margin-left: 15px; */
}
.fontstepper {
  margin-left: 15px;
  line-height: 40px;
}
.Fa {
  display: flex;
  justify-content: left;
}
.font {
  margin-left: 15px;
  font-size: 18px;
}
.scrollBar {
  /* height: 550px; */
  height: calc(100vh - 220px);
  /* padding-bottom: 80px; */
  overflow: auto;
}
.close {
  position: "absolute";

  right: 0;
  bottom: 0;
  padding: "5px 16px";
  background: "#fff";
  text-align: right;
  z-index: 1;
}
.client {
  box-shadow: rgba(128, 128, 128, 0.1) 10px 10px 5px 5px;
}
.boxx {
  box-shadow: 2px 2px 5px #ccc;
  border-radius: 5px;
  width: 95%;
  /* height: 100px; */

  margin: 0 auto;

  border: 1px solid #ccc;
  /* box-shadow: rgba(128, 128, 128, 0.1) 10px 10px 10px 10px; */

  margin-top: 20px;
  margin-bottom: 10px;
}
/* .Father {
  display: flex;
} */
</style>
